@import "../../colors";

#view {
    padding: 0;
    text-align: left;
}

.credits {
    .content {
        padding-top: 40px;
    }
    
    #acknowledgements {
        background-color: rgba(77, 151, 255, 0.15);
    }

    .avatar-grid {
        padding: 64px 0;
    }

    .acknowledge-content {
        margin: 0 176px;
        padding: 2.5rem 0 5.75rem 0;
        max-width: 520px;

        p {
            margin: 0;
            padding-bottom: 1.875rem;
            line-height: 1.5rem;
        }

        h2 {
            padding: 3rem 0 1.5rem;
            line-height: 1.2em;
            font-size: 2rem;
        }
    }

    .text-logo {
        max-width: 140px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .mid-header {
        display: flex;
        margin: 0 88px;
        flex-direction: column;
        align-items: center;

        h2 {
            line-height: 1.2em;
        }
    }

    .logo-grid {
        display: flex;
        margin: 0 auto;
        max-width: 864px;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

    }

    .supporters {
        padding: 0 0 5.25rem;
    }

    .logo {
        padding: 84px 24px 0;
    }

    .title-banner {
        display: flex;
        padding: 0;
        height: 152px;
        align-items: center;
    }

    .title-banner-h1 {
        font-size: 2rem;
    }

    #donors {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 477px) and (max-width: 768px) {
    .credits {
        .acknowledge-content {
            margin: 0 88px;
        }
    }
}
@media only screen and (min-width: 365px) and (max-width: 476px) {
    .credits {
        .avatar-item {
            padding-bottom: 16px;

            .avatar-text {
                width: 112px;
            }
        }

        .acknowledge-content,
        .mid-header {
            margin: 0 44px;
        }
    }
}
@media only screen and (max-width: 364px) {
    .credits {
        .avatar-item {
            padding-bottom: 16px;

            img {
                width: 56px;
                height: 56px;
            }

            .avatar-text {
                width: 96px;
            }
        }

        .logo-grid {
            flex-direction: column;
        }

        .acknowledge-content {
            margin: 0 12px;
        }

        .logo {
            padding: 36px;
        }

        .avatar-grid {
            margin: 0 12px;
        }
    }
}
